<template>
  <div id="big-data-container" class="big-data-container">
    <div class="head">
      <h1>人力资源管理系统驾驶舱</h1>
    </div>
    <div class="data-container">
      <div class="data-left">
        <div class="data-left-item">

          <div class="title" style="text-align: left;">员工打卡统计</div>
          <device-statistics></device-statistics>
          <div class="data-foot-line"></div>

        </div>

        <div class="data-left-item">
          <div class="title" >各事业部工时</div>
          <div id="chart-left-1" style="height: calc(100% - 30px);"></div>
          <div class="data-foot-line"></div>
        </div>

        <div class="data-left-item">
          <div class="title">员工出勤情况</div>
          <div id="chart-left-3" style="height: calc(100% - 30px);"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-left-item">
          <div class="title">项目工时情况</div>
          <div id="chart-left-2" style="height: calc(100% - 30px);"></div>
          <div class="data-foot-line"></div>
        </div>
      </div>
      <div class="data-center">
        <div class="center-top-num">
          <div class="item">
            <div class="text">集团员工人数</div>
            <div class="num">1,046</div>
          </div>
          <div class="item">
            <div class="text">正式员工人数</div>
            <div class="num">966</div>
          </div>
          <div class="item">
            <div class="text">实习员工人数</div>
            <div class="num">84</div>
          </div>
          <div class="data-foot-line"></div>
        </div>
        <div class="center-top">
          <div class="title">员工活跃信息</div>
          <iview-circle :size="200" style="padding: 8px 0;"></iview-circle>
          <div class="data-foot-line"></div>
        </div>
        <div class="title">出勤情况总计</div>
        <div id="chart-center" class="chart-center"></div>
      </div>
      <div class="data-right">
        <div class="data-right-item">
          <div class="title">考勤异常走势</div>
          <div id="chart-right-1" style="height: calc(100% - 30px);"></div>
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item">
         // <div class="title">员工打卡统计</div>
          //<iview-circle></iview-circle>
          //<div class="data-foot-line"></div>
        </div>
        <div class="data-right-item right-3">
          <div class="title">项目工时排行榜</div>
          <div id="chart-right-3" class="right-item">
            <div class="item">
              <div class="top">排名</div>
              <div class="pro-name">项目名称</div>
              <div class="num">工时</div>
              <div class="num">人数</div>
            </div>
            <div class="item">
              <div class="top top-1">
                <span>1</span>
              </div>
              <div class="pro-name">人员管理系统</div>
              <div class="num">679</div>
              <div class="num">8</div>
            </div>
            <div class="item">
              <div class="top top-2">
                <span>2</span>
              </div>
              <div class="pro-name">生产管理系统</div>
              <div class="num">1,700</div>
              <div class="num">6</div>
            </div>
            <div class="item">
              <div class="top top-3">
                <span>3</span>
              </div>
              <div class="pro-name">智慧园区管理系统</div>
              <div class="num">366</div>
              <div class="num">3</div>
            </div>
          </div>
          <div class="boxfoot"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { chartLeft1, chartLeft2, chartLeft3, chartRight1 } from '@/bigdata/chart-options';
import IviewCircle from '@/bigdata/IviewCircle';
import DeviceStatistics from '@/bigdata/DeviceStatistics';
import '@/bigdata/layout.css';

export default {
  components: {
    'iview-circle': IviewCircle,
    'device-statistics': DeviceStatistics
  },
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  methods: {

    initCharts() {
      const $chartLeft1 = echarts.init(document.getElementById('chart-left-1'));
      $chartLeft1.setOption(chartLeft1);

      const $chartLeft2 = echarts.init(document.getElementById('chart-left-2'));
      $chartLeft2.setOption(chartLeft2);

      const $chartLeft3 = echarts.init(document.getElementById('chart-left-3'));
      $chartLeft3.setOption(chartLeft3);

      const $chartCenter = echarts.init(document.getElementById('chart-center'));
      $chartCenter.setOption(chartRight1);

      const $chartRight1 = echarts.init(document.getElementById('chart-right-1'));
      $chartRight1.setOption(chartRight1);

      // 响应式处理
      window.addEventListener('resize', () => {
        $chartLeft1.resize();
        $chartLeft2.resize();
        $chartLeft3.resize();
        $chartCenter.resize();
        $chartRight1.resize();
      });
    }
  }
};
</script>

<style scoped>
.right-3 {
  display: flex;
  flex-direction: column;
}

.right-3 .right-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-3 .item {
  text-align: left;
  border-bottom: 1px solid #549069;
  flex: 1;
  display: flex;
  padding: 5px 10px;
  margin: 0 10px;
  font-size: 14px;
  line-height: 30px;
}

.right-3 .item:last-child {
  border-bottom: 0;
}

.right-3 .item > div {
  color: white;
}

.right-3 .top {
  width: 60px;
  position: relative;
}

.right-3 .top span {
  position: absolute;
  width: 20px;
  line-height: 20px;
  top: 5px;
  text-align: center;
  border-radius: 5px;
}

.right-3 .top-1 span {
  background: #e80d0d;
}

.right-3 .top-2 span {
  background: #00c935;
}

.right-3 .top-3 span {
  background: #0083f4;
}

.right-3 .num {
  width: 88px;
}

.right-3 .pro-name {
  flex: 1;
}
</style>